import React, { Component } from 'react';
import './style.css'
class TabControl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0
    }
  }
  itemClick(index) {
    this.setState({
      currentIndex: index
    })
    this.props.tabChange(index);
  }
  render() { 
    const { titles, itemType } = this.props;
    const { currentIndex } = this.state
    return (
      <div className='tab-control'>
        {titles.map((item, index) => {
          return (
              <div
                  className={`item ${index === currentIndex ? 'active' : ''}`}
                  key={item}
                  onClick={() => this.itemClick(index)}
                >
                {/* <span className='text'>{item}</span> */}
                {itemType(item)}
              </div>
          )
        })}
      </div>
     );
  }
}
 
export default TabControl;